<style scoped>
  .content{
    width:100%;
    height:100%;
    background: #edf1f5;
  }
  .head{
    height:50px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items:center;
    background: #ffffff;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    position: relative;
  }
  .head-left{
    position: absolute;
    width:40px;
    height:100%;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
  }
  .head-middle{
    font-size: 16px;
    color: #7f7a8e;
  }
  .head-right{
    position: absolute;
    right:14px;
    top:10px;
    color: #7f7a8e;
  }
  .center{
    margin-top: 20px;
  }
  .center p{
    text-align: center;
  }
  /*.center>ul{*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*background: #ffffff;*/
  /*}*/
  /*.center>ul>li{*/
    /*display: flex;*/
    /*flex-direction: row;*/
    /*padding:10px 10px;*/
  /*}*/
  /*.center>ul>li .first{*/
    /*flex: 2;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
  /*}*/
  /*.center>ul>li>.first h1{*/
    /*color: #83BBFF;*/
    /*position: relative;*/
  /*}*/
  /*.center>ul>li>.first h1>p{*/
    /*display: flex;*/
    /*width:14px;*/
    /*height:14px;*/
    /*border-radius: 50%;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*position: absolute;*/
    /*right:0;*/
    /*top:6px;*/
    /*background: #F84949;*/
    /*color: #ffffff;*/
  /*}*/
  /*.center>ul>li>div.second{*/
    /*flex: 6;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*margin-left: 10px;*/
  /*}*/
  /*.center>ul>li>h4{*/
    /*flex: 3;*/
    /*margin-top: 6px;*/
  /*}*/
  /*@media screen and (max-width: 320px) {*/
    /*.center>ul>li>.first h1{*/
      /*font-size: 50px;*/
    /*}*/
  /*}*/
  /*@media screen and (max-width:375px) and (min-width:321px) {*/
    /*.center>ul>li>.first h1{*/
      /*font-size: 60px;*/
    /*}*/
  /*}*/
  /*@media screen and (min-width: 376px){*/
    /*.center>ul>li>.first h1{*/
      /*font-size: 60px;*/
    /*}*/
  /*}*/
</style>

<template>
  <div class="content" style="position: fixed;top: 0">
    <div class="header">
      <div class="head">
        <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
        <div class="head-middle"><h3>消息中心</h3></div>
      </div>
    </div>
    <!--<v-header-->
      <!--title="消息中心"></v-header>-->

    <div class="center">
      <!--<ul>-->
        <!--<li>-->
          <!--<div class="first">-->
            <!--<h1 class="iconfont icon-laba">-->
              <!--<p>1</p>-->
            <!--</h1>-->
          <!--</div>-->
          <!--<div class="second">-->
            <!--<h3>今日看点</h3>-->
            <!--<p>美国小幅收低</p>-->
          <!--</div>-->
          <!--<h4>07-22 09:46</h4>-->
        <!--</li>-->
      <!--</ul>-->
      <p>暂时没有消息喔~</p>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
